(function () {
    'use strict';

    var md = angular.module('imageViewer', []);
    md.directive('imageViewer', imageViewer);

    imageViewer.$inject = ['$window', '$document'];
    function imageViewer($window, $document) {
        // Usage:
        //
        // Creates:
        //
        var directive = {
            link: link,
            restrict: 'A',
            scope: {
                url: '@imageViewer'
            }
        };
        return directive;

        function link(scope, element, attrs) {
            element.bind('click', function () {
                var rotate = 0;
                var winWidth = $window.innerWidth;
                var winHeight = $window.innerHeight;
                var imgWidth = element[0].naturalWidth;
                var imgHeight = element[0].naturalHeight;
                var closeBtn = angular.element('<a style="z-index:9999999999;font-size:56px;color:#eee;font-weight:100;position:fixed;right:50px;top:10px;"><i class="fa fa-times"></i></a>');
                var rotateBtn = angular.element('<a style="z-index:9999999999;font-size:50px;color:#eee;font-weight:100;position:fixed;right:50px;top:80px;"><i class="fa fa-repeat"></i></a>');
                var wrapper = angular.element('<div id="image-viewer-wrapper" style="position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;background:rgba(0,0,0,0.5);z-index:999999999;" ></div>');
                var img = angular.element('<img class="animated zoomIn am-short" style="max-height:100%;max-width: 100%; width: auto;height: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border:solid 5px #fff" src="' + scope.url + '" />');

                closeBtn.bind('click', function () {
                    closeBtn.parent().remove();
                    $document.find('body').css('overflow-y', 'auto');
                })
                rotateBtn.bind('click', function () {
                    rotate += 90;
                    img.css('transform', 'rotate(' + rotate + 'deg)');
                    if (rotate == 360) {
                        rotate = 0;
                    }
                })
                $document.find('body').append(wrapper);
                wrapper.append(closeBtn);
                wrapper.append(rotateBtn);
                wrapper.append(img);
                // if(imgWidth > winWidth){
                //     img.css('width','80%');
                // }
                var fit = winHeight + 'px';
                if (imgWidth > imgHeight) {
                    img.css('width', fit);
                }
                else {

                    img.css('height', fit);
                }
                $document.find('body').css('overflow-y', 'hidden');
                $document.bind("keydown", function (event) {
                    if (event.keyCode === 27) {
                        wrapper.remove();
                        $document.find('body').css('overflow-y', 'auto');
                    }
                });
            })
        }
    }

})();